<template>
  <div class="app-container" :style="rootStyle">
    <el-card v-if="!checkPermi(['platop'])"  shadow="always" style="width: 100%;height: 500px;">
      <el-scrollbar style="white-space: nowrap;" >
        <el-row :gutter="20">
        <el-col :span="12">
          <div style="width: 100%">
            <h3 style="font-weight: bold">兑换信息</h3>
            <div style="display: flex;margin-left: 10px">
              <div style="height: 320px;position: relative">
                <div
                  style="position:absolute;width:20px;top:52px;height:260px;background-color: #FFFFFF; border: 2px solid #bfbfbf;overflow:hidden;">
                </div>
              </div>
              <div style="display: flex;height: 320px;width: 100%;flex-direction: column;position: relative;margin-left: 15px;background-color: #FFFFFF">
                <div style="display: flex;position: absolute;top:0px">
                  <div style="width: 50%">
                  <span style="padding-left: 20px;font-weight: bold">
                    卖出币种
                  </span>
                    <div style="padding-top:12px;display:flex;align-items: center">
                      <el-select v-model="sellCurrency" placeholder="请选择" style="width: 250px"
                                 @change="changeSellSelection" ref="sellSelect">
                        <el-option
                          v-for="(item, key) in accountMap"
                          :key="key"
                          :label="key"
                          :value="key">
                          <div class="option_box">
                            <el-image class="option_img" :src="imgMap[key]"></el-image>
                            <span>{{ item }} {{key}}</span>
                          </div>
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <div style="width: 50%;margin-left: 30px">
                  <span style="font-weight: bold">
                    卖出账户<span style="font-weight: normal;font-size: 16px"
                                  v-if="sellCurrency != undefined"> 余额: {{ accountMap[sellCurrency] }} {{sellCurrency}}</span>
                  </span>
                    <div style="padding-top:12px;display:flex;align-items: center">
                      <el-input type="number" v-model="sellAmount" placeholder="请输入数额"></el-input>
                    </div>
                  </div>
                </div>
                <div style="padding-left: 20px;display: flex;font-weight: bold;position: absolute;top: 110px">
                  <div style="width: 100%;font-size: 16px;font-weight: normal" >
                    <div style="margin-bottom: 20px">
                      参考汇率:
                    </div>
                    <div style="margin-bottom: 20px">
                      <span v-if="buyCurrency != undefined && sellCurrency != undefined">
                        <b>{{exchangeRate}} </b>{{ sellCurrency }}/{{ buyCurrency }}
                      </span>
                    </div>
                    <div style="margin-bottom: 20px">
                      查询时间: {{ queryTime }}
                    </div>
                    <div v-if="taxFee">
                      手续费: {{ taxFee }} {{sellCurrency}}
                    </div>
                  </div>
                </div>
                <div style="display: flex;position: absolute;top: 260px">
                  <div style="width: 50%">
                    <span style="padding-left: 20px;font-weight: bold">
                      买入币种
                    </span>
                      <div style="padding-top:12px;display:flex;align-items: center">
                        <el-select v-model="buyCurrency" placeholder="请选择" style="width: 250px"
                                   @change="changeBuySelection" ref="buySelect">
                          <el-option
                            v-for="(item, key) in accountMap"
                            :key="key"
                            :label="key"
                            :value="key">
                            <div class="option_box">
                              <el-image class="option_img" :src="imgMap[key]"></el-image>
                              <span>{{ item }} {{key}}</span>
                            </div>
                          </el-option>
                        </el-select>
                      </div>
                  </div>
                  <div style="width: 50%;margin-left: 30px">
                     <span style="font-weight: bold">
                      买入账户<span style="font-weight: normal;font-size: 16px"
                                    v-if="buyCurrency != undefined"> 余额: {{ accountMap[buyCurrency] }} {{buyCurrency}}</span>
                    </span>
                    <div style="padding-top:12px;display:flex;align-items: center">
                      <el-input v-model="buyAmount" disabled></el-input>
                    </div>
                  </div>
                </div>
                <div style="position: absolute;top: 350px;display: flex;">
                    <el-button :loading="queryLoading" type="primary" icon="el-icon-search" style="width:120px" @click="queryExchangeRate()">查询汇率</el-button>
                    <el-button :loading="queryLoading" v-if="lockId !== ''" type="primary" icon="el-icon-check" style="margin-left: 20px" @click="submitExchange()">提交兑换</el-button>
                </div>
              </div>

            </div>


          </div>
        </el-col>
        <el-col :span="12" v-if="!isMobile()">
<!--          <div style="width: 100%">-->
<!--            <h3 style="font-weight: bold">汇率走势</h3>-->
<!--          </div>-->

        </el-col>
      </el-row>
      </el-scrollbar>
    </el-card>
    <el-card shadow="always" :style="orderCardStyle">
      <div slot="header" class="clearfix">
        <span style="font-weight: bold;font-size: 20px;margin-left: 10px;margin-right: 30px">兑换记录</span>
        <el-button v-if="!checkPermi(['platop'])" type="primary" icon="el-icon-search" size="mini" @click="handleQuery">刷新</el-button>
      </div>
      <el-form v-if="checkPermi(['platop'])" :model="queryParams" ref="queryForm" size="small" :inline="true" :v-show="true" label-width="68px">
        <el-form-item label="代理" prop="parentName">
          <el-input
            v-model="queryParams.parentName"
            placeholder="输入代理名"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="商户号" prop="mchNo">
          <el-input
            v-model="queryParams.mchNo"
            placeholder="输入商户号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="商户名" prop="mchName">
          <el-input
            v-model="queryParams.mchName"
            placeholder="输入商户名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="exchangeList">
        <el-table-column v-if="checkPermi(['platop'])"  label="代理" align="center" prop="parentName" />
        <el-table-column v-if="checkPermi(['platop'])" label="客户名" align="center">
          <template slot-scope="scope">
            <p>
              <span style="color: rgb(114, 158, 213); border-radius: 1px; padding: 3px 7px; height: auto; width: auto;">商户号</span>
              <span>{{ scope.row.mchNo }}</span>
            </p>
            <p>
              <span style="color: rgb(86, 207, 86); border-radius: 1px; padding: 3px 7px; height: auto; width: auto;">名称</span>
              <span>{{ scope.row.mchName }}</span>
            </p>
          </template>
        </el-table-column>
        <el-table-column label="提交时间" align="center" prop="createTime"/>
        <el-table-column label="卖出" align="center">
          <template slot-scope="scope">
            <p>
              <span style="color: rgb(114, 158, 213); border-radius: 1px; padding: 3px 7px; height: auto; width: auto;">金额</span>
              <span>{{ scope.row.fromAmount }}</span>
            </p>
            <p>
              <span style="color: rgb(86, 207, 86); border-radius: 1px; padding: 3px 7px; height: auto; width: auto;">币种</span>
              <span>{{ scope.row.from }}</span>
            </p>
          </template>
        </el-table-column>
        <el-table-column label="买入" align="center">
          <template slot-scope="scope">
            <p>
              <span style="color: rgb(114, 158, 213); border-radius: 1px; padding: 3px 7px; height: auto; width: auto;">金额</span>
              <span>{{ scope.row.toAmount }}</span>
            </p>
            <p>
              <span style="color: rgb(86, 207, 86); border-radius: 1px; padding: 3px 7px; height: auto; width: auto;">币种</span>
              <span>{{ scope.row.to }}</span>
            </p>
          </template>
        </el-table-column>
        <el-table-column label="手续费" align="center" prop="vaTax">
          <template slot-scope="scope">
            <span v-if="scope.row.ourTax && scope.row.ourTax > 0">{{scope.row.ourTax}} {{scope.row.from}}</span>
            <span v-else>0</span>
          </template>
        </el-table-column>
        <el-table-column label="汇率" align="center" prop="rate"/>
        <el-table-column  v-if="checkPermi(['platop'])" label="利润" align="center" >
          <template slot-scope="scope">
            <span v-if="scope.row.profit">{{scope.row.profit}} {{scope.row.from}}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="state">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.state == 0">兑换中</el-tag>
            <el-tag v-if="scope.row.state == 1" type="success">兑换完成</el-tag>
            <el-tag v-if="scope.row.state == 2" type="danger">失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="完成时间" align="center" prop="finishTime"/>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getExchangeList"
      />
    </el-card>

  </div>
</template>

<script>
import {singleAccount} from "@/api/fusion/mchva";
import {lockRate, exchange} from "@/api/fusion/va/module/bison";
import {listExchange} from "@/api/fusion/va/exchange";
import usd from '@/assets/va/usd.png'
import eur from '@/assets/va/eur.png'
import cnh from '@/assets/va/cnh.png'
import usdc from '@/assets/va/usdc.jpg'
import usdt from '@/assets/va/usdt.png'

export default {
  name: "bison-exchange",
  data() {
    return {
      queryParams: {
        isAsc: 'desc',
        orderByColumn: 'id',
        pageNum: 1,
        pageSize: 10,
        parentName: null,
        mchName: null,
        mchNo: null,
        state: null,
      },
      rootStyle:'padding:20px',
      orderCardStyle:'margin-top:30px;width: 100%;height: auto;',
      queryLoading: false,
      imgMap: {},
      total: 0,
      exchangeList:[],
      sellAmount:null,
      buyAmount: '',
      activeIndex: 0,
      loading: false,
      accountMap: '',
      sellCurrency: undefined,
      buyCurrency: undefined,
      queryTime: '',
      exchangeRate: '',
      taxFee: '',
      lockId: ''
    };
  },
  created() {
    this.$nextTick(()=>{
      if(this.checkPermi(['platop'])) {
        this.orderCardStyle = "width: 100%;height: auto;"
        this.rootStyle = 'padding:0'
      }

    })
    this.queryAccount();
    this.getExchangeList();
  },
  methods: {
    isMobile() {
      const width = document.documentElement.clientWidth;
      return width <= 768; // 可以根据实际需求调整屏幕宽度阈值
    },
    changeIcon(currency, refName) {
      this.$refs[refName]
        .$el.children[0]
        .children[0]
        .setAttribute(
          "style",
          `
					background: url(${this.imgMap[currency]}) no-repeat;
					background-position: 10px center;
					background-size: 20px 20px;
					text-indent: 30px;
				`
        );
    },
    changeBuySelection(val) {
      this.buyCurrency = val
      this.changeIcon(val, 'buySelect')
    },
    changeSellSelection(val) {
      this.sellAmount = ''
      this.buyAmount = ''
      this.sellCurrency = val
      this.changeIcon(val, 'sellSelect')
    },
    queryExchangeRate() {
      if(this.sellCurrency == undefined || this.buyCurrency == undefined) {
        return
      }
      if(this.sellCurrency == this.buyCurrency ) {
        return this.$modal.msgError("卖出与买入的币种不能相同");
      }
      if(!this.sellAmount) {
        return this.$modal.msgError("卖出金额不能为空");
      }
      this.lockId = ''
      this.taxFee = 0
      this.exchangeRate = ''
      this.queryLoading = true;
      lockRate(this.sellCurrency, this.buyCurrency, this.sellAmount).then(response => {
        this.lockId = response.lockId
        this.exchangeRate = response.exchangeRate
        this.taxFee = response.taxFee
        this.queryTime = response.queryTime
        this.buyAmount = (this.sellAmount-this.taxFee)*this.exchangeRate
      })
      setTimeout(() => {
        this.queryLoading = false;
      }, 2000);
    },
    submitExchange() {
      this.queryLoading = true;
      exchange(this.lockId) .then(response => {
        this.$modal.msgSuccess("提交成功");
        this.sellAmount = ''
        this.buyAmount = ''
        this.sellCurrency = ''
        this.buyCurrency = ''
      });
      setTimeout(() => {
        this.queryLoading = false;
      }, 2000);
    },
    getExchangeList() {
      this.loading = true;
      //贝森硬编码
      this.queryParams.provider = 'bison'
      listExchange(this.queryParams).then(response => {
        this.exchangeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.provider = 'bison'
      this.getExchangeList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    queryAccount() {
      this.accountMap = {}
      if(this.checkPermi(['platop'])) {
        return
      }
      this.loading = true;

      singleAccount('bison').then(response => {
        // let legal = response.data.legal
        // let digtal = response.data.digtal;
        // this.accountMap = legal.concat(digtal)
        this.accountMap =  response.data.balance
        this.imgMap = {}
        for (var key in response.data.balance) {
          let d = this.accountMap[key]
          if (key == 'EUR') {
            this.imgMap[key] = eur
          } else if (key == 'USD') {
            this.imgMap[key]= usd
          } else if (key == 'CNH') {
            this.imgMap[key] = cnh
          } else if (key == 'USDC') {
            this.imgMap[key]= usdc
          } else if (key == 'USDT') {
            this.imgMap[key] = usdt
          }
        }
      });
    }
  }
};
</script>
<style>
.el-scrollbar__wrap {
  height: 500px;
  width: 100%;
  overflow-y: hidden;
}
.option_box {
  display: flex;
  align-items: center;
}

.option_img {
  width: 25px;
  height: 25px;
  margin-right: 7px;
}
</style>
